<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter();
const contentAll = ref([
    { icon: 'iconfont icon-home-g', tetle: '主页' },
    { icon: 'iconfont icon-shuju', tetle: '数据' },
    { icon: 'iconfont icon-shezhi', tetle: '设置' }
])
// 数据总览
const dataSumArr = ref([
    { url: "#icon-shujuzhanshi1", title: "近七日展示", number: 0, change: "昨日无变化" },
    { url: "#icon-liulan-5", title: "近七日浏览", number: 0, change: "昨日无变化" },
    { url: "#icon-dianzan", title: "近七日点赞", number: 0, change: "昨日无变化" },
    { url: "#icon-shoucang", title: "近七日收藏", number: 0, change: "昨日无变化" },
])
// 创作模版数据
const moreDataArr = ref([
    { title: "# 为什么总是感到迷茫？", number: '1302' },
    { title: "# 有100万你会躺平吗？", number: '1402' },
    { title: "# 为什么勤劳不一定能致富？", number: '1463' },
    { title: "# 如何提高职场自信？", number: '1352' },
    { title: "# 不想出去面试怎么办？", number: '1202' },
    { title: "# 一句话总结现在的生活状态", number: '1301' },
    { title: "# 什么人每天带饭去上班", number: '1382' },
    { title: "# 员工是否应该在工位吃饭", number: '1009' },
    { title: "# 工位可以有多温馨？", number: '1392' },
    { title: "# 如果你失业了你会干啥", number: '1032' }
])
// 
const managementArr = ref([
    {
        title: "全部", classify: [
            { content: "所有作品" },
            { content: "已发布" },
            { content: "审核中" },
            { content: "未通过" }
        ]
    },
    {
        title: "文章", classify: [
            { content: "所有文章" },
            { content: "已发布" },
            { content: "审核中" },
            { content: "未通过" }
        ]
    },
    {
        title: "视频", classify: [
            { content: "所有视频" },
            { content: "已发布" },
            { content: "审核中" },
            { content: "未通过" }
        ]
    },
    {
        title: "动态", classify: [
            { content: "所有动态" },
            { content: "已发布" },
            { content: "审核中" },
            { content: "未通过" }
        ]
    },
    {
        title: "提问", classify: [
            { content: "所有作品" },
            { content: "已发布" },
            { content: "审核中" },
            { content: "未通过" }
        ]
    },
    {
        title: "回答", classify: [
            { content: "所有作品" },
            { content: "已发布" },
            { content: "审核中" },
            { content: "未通过" }
        ]
    },
    {
        title: "草稿箱", classify: [
            { content: "文章草稿" }
        ]
    },
])
// 
const managementArr2 = ref([
    { title: "全部" },
    { title: "文章" },
    { title: "视频" },
    { title: "动态" },
    { title: "回答" }
])
// 控制作品灵感的动态类名变量
const isExpanded = ref(false);

const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}
// 控制主页功能内容的切换
const isHidden1 = ref(true)
// 控制管理功能内容的切换
const isHidden2 = ref(false)
// 控制数据功能内容的切换
const isHidden3 = ref(false)
// 控制设置功能内容的切换
const isHidden4 = ref(false)
const isHidden5 = ref(false)
// 控制切换功能时的样式
const activeStyle = ref('')
// 设置展开收起的文字和图标
const unfoldItem = ref('展开更多');
const unfoldIcon = ref('iconfont icon-zhankaigengduo')
//统计作品的数量
const proNumber = ref(0);
// 控制管理功能切换的内容
const shu = ref(0);
// 控制管理功能切换的样式
const managementCtrl = ref('');
const managementCtrl2 = ref('');
// 控制管理功能切换的内容的样式
const productionCtrl = ref('');
// 控制发布功能框的吸顶
const issueCtrl = ref(false);
const issueCtr2 = ref(false);
// 定义一个ref来引用文件输入元素
const fileInput = ref(null);
// 定义图片规范提示框的显示隐藏
const tooltipVisible = ref(false);
// 控制模态框的显示隐藏
const isModalOpen = ref(false);
const isModalOpen2 = ref(false);
// 存放账号名称
const accountName = ref('邓世龙');
// 存放用户简介
const synopsis = ref('');
const issueTimeout =ref(null);
//组件挂载完成监听滚动条
onMounted(() => {
    window.addEventListener('scroll', rollFunction);
})
// 组件卸载之前移出监听
onBeforeUnmount(() => {
    window.removeEventListener('scroll', rollFunction);
})
const showIssue = () => {
      issueCtr2.value = true;
      clearTimeout(issueTimeout.value); // 清除任何已存在的定时器
    };

    const hideIssue = (event) => {
      const target = event.relatedTarget;
      if (!target || !event.currentTarget.contains(target)) {
        issueTimeout.value= setTimeout(() => {
          issueCtr2.value = false;
        }, 300); // 设置1秒的延迟
      }
    };
// 滚动触发事件
const rollFunction = () => {
    const rollHeight = window.scrollY;
    if (rollHeight >= 38) {
        issueCtrl.value = true;
    } else {
        issueCtrl.value = false;
    }
}
const clickTitle = (index) => {
    activeStyle.value = index;
    if (index == 0) {
        isHidden1.value = true;
        isHidden2.value = false;
        isHidden3.value = false;
        isHidden4.value = false;
        isHidden5.value = false;
    } else if (index == 1) {
        isHidden2.value = true;
        isHidden1.value = false;
        isHidden3.value = false;
        isHidden4.value = false;
        isHidden5.value = false;
    } else if (index == 2) {
        isHidden3.value = true;
        isHidden1.value = false;
        isHidden2.value = false;
        isHidden4.value = false;
        isHidden5.value = false;
    }
}
const managementOut = (index) => {
    if (index == 1) {
        isHidden4.value = true;
        isHidden5.value = false;
    } else {
        isHidden5.value = true;
        isHidden4.value = false;
    }
    console.log(index);
    isHidden1.value = false;
    isHidden2.value = false;
    isHidden3.value = false;
    activeStyle.value = null;
}

// 创作灵感的展开事件
const clickMore = () => {
    isExpanded.value = !isExpanded.value;
    console.log('isExpanded', isExpanded.value)
    if (isExpanded.value) {
        unfoldItem.value = '收起';
        unfoldIcon.value = 'iconfont icon-shouqi'
    } else {
        unfoldItem.value = '展开更多';
        unfoldIcon.value = 'iconfont icon-zhankaigengduo'
    }
}
// 管理标题点击事件
const managementClick = (index) => {
    shu.value = index
    managementCtrl.value = index
}
// 管理品论标题点击事件
const managementClick2 = (index) => {
    shu.value = index
    managementCtrl2.value = index
}
// 作品状态点击事件
const productionClick = (index) => {
    productionCtrl.value = index
}
// 定义处理文件选择的方法
const onFileSelected = (event) => {
    // console.log(event);
    const file = event.target.files[0];
    console.log(file)
    if (file) {
        console.log('Selected file:', file.name);
        // 这里可以添加上传文件到服务器的代码
    }
};
// 定义打开文件选择对话框的方法
const openFileInput = () => {
    // console.log(fileInput.value)
    if (fileInput.value) {
        fileInput.value.click(); // 点击时显示文件选择对话框
    }
};

// 定义显示提示框的方法
const showTooltip = () => {
    tooltipVisible.value = true;
};
// 定义隐藏提示框的方法
const hideTooltip = () => {
    tooltipVisible.value = false;
};
// 点击修改事件
const openModal = () => {
    isModalOpen.value = true;
};
const openModal2 = () => {
    isModalOpen2.value = true;
};
// 隐藏模态框
const closeModal = () => {
    isModalOpen.value = false;
    isModalOpen2.value = false;
};

// 修改用户信息的表单事件
const submitForm = () => {
    // 处理表单提交逻辑
    console.log('Account name:', accountName.value);
    closeModal();
};
const articleClick = (index) => {
    if (index == 1) {
        router.push("/publishArticle")
    }
    if (index == 2) {
        router.push("/publishDynamic")
    }
    if (index == 3) {
        router.push("/publishQuestion")
    }

}
</script>
<template>
    <div class="PostOut">
        <div class="PostLeft">
            <div class="PostLeftOut" :class="{ 'postLeft2': issueCtrl }">
                <div class="issue">
                    <div class="issue-title"  @mouseover="showIssue" @mouseleave="hideIssue">
                        <span>发布</span>
                        <div class="issue-content" v-show="issueCtr2" >
                            <div class="issue-content-item" @click="articleClick('1')">发布文章</div>
                            <div class="issue-content-item" @click="articleClick('2')">发布动态</div>
                            <div class="issue-content-item" @click="articleClick('3')">发布提问</div>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="management-out">
                        <el-col>
                            <el-menu class="el-menu2" @open="handleOpen" @close="handleClose" :default-openeds="['1']">
                                <el-sub-menu index="1" class="el-sub-menu3">
                                    <template #title>
                                        <i class="iconfont icon-guanli"></i>
                                        <span>管理</span>
                                    </template>
                                    <el-menu-item index="1" @click="managementOut('1')">作品管理</el-menu-item>
                                    <el-menu-item index="2" @click="managementOut('2')">评论管理</el-menu-item>
                                </el-sub-menu>
                            </el-menu>
                        </el-col>
                    </div>
                    <div v-for="(item, index) in contentAll" :key="index" class="content_Item_out"
                        :style="activeStyle == index ? { backgroundColor: '#EBFAF9', color: '#00B8BF' } : { backgroundColor: '', color: '' }"
                        @click="(clickTitle(index))">
                        <i :class="item.icon" style="margin-left:19px; font-size:20px;margin-right:15px;"></i>
                        <span>{{ item.tetle }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="PostRight">
            <!-- 主页 -->
            <div class="RightHome" v-show="isHidden1">
                <div class="homepage">
                    <div class="homeTitle">
                        <div style="font-size:20px;">数据总览</div>
                        <div class="moreData" style="font-size:14px;">更多数据
                            <i class="iconfont icon-gengduo"></i>
                        </div>
                    </div>
                    <div class="datashow">
                        <div class="data_item" v-for="(item, index) in dataSumArr" :key="index">
                            <div class="datahead">
                                <svg class="icon" aria-hidden="true">
                                    <use :xlink:href="item.url"></use>
                                </svg>
                                <span>{{ item.title }}</span>
                            </div>
                            <div class="number">
                                {{ item.number }}
                            </div>
                            <div class="dataEnd">
                                {{ item.change }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 动态模版-->
                <div class="DynamicTemplate">
                    <div style="width:100%;">
                        <img style="width:94px;height:30px;" src="/src/assets/Forum/creator-idea.png" alt="">
                    </div>
                    <div class="template-all" :style="{ maxHeight: isExpanded ? '1025px' : '360px' }">
                        <div class="TemplateOut" v-for="(item, index) in moreDataArr" :key="index">
                            <p>{{ item.title }}</p>
                            <p style="height:50px;"></p>
                            <div class="number_out">
                                <span style="color:#FF9821;">瓜分20w流量</span>
                                <span class="number_style">{{ item.number }}</span>
                                <span>人想了解</span>
                                <span class="icon_style">
                                    <i class="iconfont icon-fengche"></i>
                                    <span>写动态</span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="unfold">
                        <div class="unfold-text" @click="clickMore">{{ unfoldItem }}
                            <i :class="unfoldIcon"></i>
                        </div>
                    </div>

                </div>
            </div>
            <!--作品管理-->
            <div class="management" v-show="isHidden4">
                <div class="management-all">
                    <div class="management-title" v-for="(item, index) in managementArr" :key="index">
                        <div class="management-title-text" :style="managementCtrl == index ? { color: '#00B4B3' } : {}"
                            @click="managementClick(index)">{{ item.title }}</div>
                        <div class="production-all">
                            <div class="production-out" v-for="(item2, index2) in item.classify" :key="index2"
                                v-show="shu === index">
                                <div @click="productionClick(index2)"
                                    :style="productionCtrl == index2 ? { color: '#00B4B3', 'font-weight': 'bold' } : {}"
                                    class="production-item">{{ item2.content }}<span>({{ proNumber }})</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 评论管理 comment-->
            <div class="management" v-show="isHidden5">
                <div class="management-all">
                    <div class="management-title" v-for="(item, index) in managementArr2" :key="index">
                        <div class="management-title-text" :style="managementCtrl2 == index ? { color: '#00B4B3' } : {}"
                            @click="managementClick2(index)">{{ item.title }}</div>
                    </div>
                </div>
                <!-- 展示内容 -->
                <div class="comment-all">
                    <div class="comment-left"></div>
                    <div class="comment-right"></div>
                </div>

            </div>
            <!-- 设置-->
            <div class="set-all" v-show="isHidden3">
                <div class="set-title">
                    <div class="set-title-text">账号设置</div>
                </div>
                <div class="head-portrait">
                    <div class="portrait-left">
                        <div>
                            <span>账户头像</span>
                        </div>
                        <div style="display:flex;align-items: center;">
                            <img style="width:48px; height:48px;" src="" alt="">
                            <div class="hint-out" @mouseover="showTooltip" @mouseleave="hideTooltip">
                                <span>头像上传规范</span>
                                <i class="iconfont icon-yk_wenhao_fill"></i>

                                <!-- 提示框 -->
                                <div class="tooltip" :style="{ display: tooltipVisible ? 'block' : 'none' }">
                                    <div class="tooltip-content">
                                        <p>1. 要求清晰、健康、代表品牌形象</p>
                                        <p>2. 请勿使用二维码、政治敏感及色情图片</p>
                                        <p>3. 图片格式支持bmp, jpeg, jpg, png；200X200像素，大小不超过5MB</p>
                                        <p>4. 如果使用公司或品牌logo作为头像，可能会被要求提供证明材料</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="portrait-right">
                        <span>每月只能修改两次</span>
                        <span class="modification-item" @click="openFileInput">
                            <i class="iconfont icon-xiugaitubiao"></i>
                            <span>修改</span>
                        </span>
                        <!-- 使用ref来引用文件输入元素 -->
                        <input ref="fileInput" type="file" accept="image/*" style="display:none;"
                            @change="onFileSelected">
                    </div>
                </div>
                <div class="user-name">
                    <div class="portrait-left" style="width:18%;">
                        <div>
                            <span>账户名称</span>
                        </div>
                        <div>
                            <span style="font-size:14px;color:gray;">{{ accountName }}</span>
                        </div>
                    </div>
                    <div class="portrait-right">
                        <span>每月只能修改两次</span>
                        <span class="modification-item" @click="openModal">
                            <i class="iconfont icon-xiugaitubiao"></i>
                            <span>修改</span>
                        </span>
                    </div>
                </div>
                <!-- user-synopsis -->
                <div class="user-name">
                    <div class="portrait-left" style="width:18%;">
                        <div>
                            <span>账号简介</span>
                        </div>
                    </div>
                    <div class="portrait-right">
                        <span>每月只能修改两次</span>
                        <span class="modification-item" @click="openModal2">
                            <i class="iconfont icon-xiugaitubiao"></i>
                            <span>修改</span>
                        </span>
                    </div>
                </div>
                <!-- 模态框 -->
                <div class="modal" v-if="isModalOpen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <span class="modal-title">修改账号名称</span>
                            <button @click="closeModal" class="modal-close">&times;</button>
                        </div>
                        <div class="error-message">
                            <span>2-10个汉字，请勿使用含有特殊符号或明显营销推广意图的名称。</span>
                        </div>
                        <div class="modal-body">
                            <form @submit.prevent="submitForm">
                                <div class="name-input-wrapper">
                                    <input class="name-input" type="text" required v-model="accountName" minlength="2"
                                        maxlength="10" />
                                    <span>{{ 0 + accountName.length }}/10</span>
                                </div>
                                <div style="display: flex;justify-content:end;">
                                    <button class="save-button" @click="closeModal">取消</button>
                                    <button class="save-button" type="submit">保存</button>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
                <!-- 模态框 -->
                <div class="modal" v-if="isModalOpen2">
                    <div class="modal-content">
                        <div class="modal-header">
                            <span class="modal-title">修改账号简介</span>
                            <button @click="closeModal" class="modal-close">&times;</button>
                        </div>
                        <div class="error-message">
                            <span>20个汉字以内,展示个人特色或介绍创作内容,有助于加强读者对机构的了解。</span>
                        </div>
                        <div class="modal-body">
                            <form @submit.prevent="submitForm">
                                <div class="name-input-wrapper">
                                    <input class="name-input" type="text" required v-model="synopsis" maxlength="20" />
                                    <span>{{ 0 + synopsis.length }}/20</span>
                                </div>
                                <div style="display: flex;justify-content:end;">
                                    <button class="save-button" @click="closeModal">取消</button>
                                    <button class="save-button" type="submit">保存</button>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>
<style scoped>
.PostOut {
    width: 100%;
    height: 100%;
    margin-top: 62px;
    /* border: 1px solid rgb(180, 13, 13);  */
    display: flex;
    justify-content: space-between;
}

.el-menu1 {
    width: 180px;
    border: none;
    margin-top: 10px;
}


.PostLeft {
    width: 200px;
    background-color: #FFFFFF;
    border-radius: 10px;
}

.PostLeftOut {
    height: 400px;
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.postLeft2 {
    position: fixed;
    top: 70px;
}

.PostRight {
    width: 950px;
    /* border: 1px solid red; */
}

.content {
    width: 100%;
    border-top: 1px solid rgb(186, 183, 183);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}

.el-menu2 {
    width: 180px;
    border: none;
    margin-top: 10px;
}

.issue {
    width: 100%;
    height: 60px;
    /* border: 1px solid black; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.issue-title {
    width: 176px;
    height: 40px;
    background-color: #00B8BF;
    border-radius: 5px;
    text-align: center;
    line-height: 40px;
    color: white;
    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
}

.issue-content {
    width: 150px;
    height: 200px;
    border-radius: 10px;
    background-color: white;
    /* 添加阴影 */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 9px;
    right: -160px;
    z-index: 99;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.issue-content-item {
    width: 120px;
    height: 30px;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    cursor: pointer;
    color: black;
}
.issue-content-item:hover {
    background-color: rgb(201, 198, 198);
    color: #00A6A7;
}

:deep().el-sub-menu3 .el-sub-menu__title {
    height: 40px;
    font-weight: 600;
    font-size: 16px;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
}

:deep().el-sub-menu3 .el-sub-menu__title:hover {
    background-color: rgb(162, 161, 161);
}

:deep().el-sub-menu3 .el-menu-item {
    height: 30px;
    font-size: 14px;
    font-weight: 600;
}

.content_Item_out {
    width: 180px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    background-color: white;
    border-radius: 5px;
}

.content_Item_out:hover {
    background-color: rgb(162, 161, 161);
    cursor: pointer;
}

.icon-guanli {
    font-size: 25px;
    margin-top: 2px;
    margin-right: 10px;
}

.homepage {
    width: 700px;
    background-color: white;
    padding: 20px;
    border-radius: 20px;
}

.DynamicTemplate {
    width: 700px;
    overflow: hidden;
    background-color: white;
    padding: 20px;
    border-radius: 20px;
    margin-top: 10px;
}

.template-all {
    width: 700px;
    max-height: 360px;
    overflow: hidden;
    background-color: white;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    transition: all 0.5s ease-in;
}

.icon-gengduo {
    font-size: 10px;
}

.datashow {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.homeTitle {
    display: flex;
    justify-content: space-between;
}

.moreData {
    width: 76px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    font-size: 14px;
    color: #747680;
    transition: background-color 0.5s ease-in;
    border-radius: 5px;
}

.moreData:hover {
    background-color: #e9eaeb;
    cursor: pointer;
}

.data_item {
    width: 165px;
    height: 131px;
    /* border:1px solid red; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

}

.datahead {
    width: 100%;
    height: 40px;
    /* border:1px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #747680;
}

.number {
    width: 100%;
    height: 40px;
    border-right: 2px solid #747680;
    color: black;
    font-size: 35px;
    font-weight: 500;
    text-align: center;
    line-height: 40px;
}

.dataEnd {
    width: 104px;
    height: 24px;
    color: #747680;
    background-color: #F7F8FA;
    border-radius: 15px;
    text-align: center;
    font-size: 14px;
    line-height: 24px;
}

.icon {
    width: 20px;
    height: 20px;
}

.TemplateOut {
    width: 323px;
    height: 158px;
    margin-bottom: 10px;
    background-size: cover;
    /* 覆盖整个容器 */
    background-image: url("/src/assets/Forum/63dv.png");
    border: 1px solid rgb(237, 235, 235);
    border-radius: 13px;
    padding: 10px;
}

.number_style::before {
    height: 12px;
    width: 1px;
    display: inline-block;
    content: "";
    background-color: #747680;
    margin: 0px 10px;
}

.number_out {
    font-size: 12px;
    height: 32px;
    line-height: 32px;
}

.icon_style {
    height: 32px;
    margin-left: 70px;
    font-size: 14px;
    color: #00A6A7;
    background-color: #E5F8F8;
    padding: 5px 10px;
    border-radius: 10px;
}

.icon_style:hover {
    background-color: #00A6A7;
    cursor: pointer;
    color: white;
}

.icon-fengche {
    font-size: 20px;
    color: #00B8BF;
}

.icon_style:hover .icon-fengche {
    background-color: #00A6A7;
    cursor: pointer;
    color: white;
}

.unfold {
    width: 100%;
    height: 40px;
    /* background-color: #00A6A7; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.unfold-text {
    width: 100px;
    height: 30px;
    font-size: 14px;
    color: #00A6A7;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
}

.unfold-text:hover {
    background-color: #F2F3F5;
    cursor: pointer;
}

.management {
    min-height: 100vh;
    background-color: white;
    border-radius: 20px;
    padding: 1px;
}

.icon-zhankaigengduo {
    font-size: 12px;
}

.demo-tabs {
    margin-top: 20px;
}

/*  */
.management-all {
    display: flex;
    position: relative;
    /* background-color:yellow; */
    padding: 20px;
    border-bottom: 1px solid rgb(207, 205, 205);
}

.management-title {
    margin-right: 20px;
    padding: 10px 20px;
}

.management-title-text {
    cursor: pointer;
    font-size: 18px;

}

.management-title-text:hover {
    color: #00A6A7;
}

.production-all {
    width: 50%;
    display: flex;
    position: absolute;
    top: 100px;
    left: 0px;
    /* background-color:yellow; */
}

.production-out {
    font-size: 14px;
    padding: 10px 25px;
}

.production-item {
    cursor: pointer;
}

.comment-all {
    display: flex;
    /* border:1px solid yellow; */
}

.comment-left {
    width: 40%;
    min-height: 100vh;
    border-right: 1px solid #CFCDCD;
}

.comment-right {
    width: 60%;
    min-height: 100vh;
}

/* 设置功能样式 */
.set-all {
    background-color: white;
    min-height: 652px;
    border-radius: 20px;
}

.set-title {
    height: 55px;
    width: 100%;
    display: flex;
    align-items: center;
}

.set-title-text {
    font-size: 18px;
    margin-left: 20px;
    cursor: pointer;
    font-weight: 500;
}

.head-portrait {
    height: 113px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-name {
    height: 87px;
    display: flex;
    justify-content: space-between;
}

.hint-out {
    position: relative;
    height: 20px;
    font-size: 12px;
    color: #9FA0A7;
    cursor: pointer;
    margin-left: 10px;
}

.portrait-left {
    width: 30%;
    height: 100%;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px
}

.portrait-right {
    width: 20%;
    height: 100%;
    /* border: 1px solid rgb(203, 4, 4); */
    font-size: 12px;
    padding-right: 20px;
    color: #9FA0A7;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.hint-out:hover .icon-yk_wenhao_fill {
    color: #00A6A7;
}

.icon-yk_wenhao_fill {
    font-size: 14px;
    margin-left: 5px;
}

.modification-item {
    color: #00A6A7;
    cursor: pointer;
}

.modification-item:hover {
    color: #03b8b8;
    font-weight: 500;
}

/* 提示框样式 */
.tooltip {
    position: absolute;
    background-color: #45464D;
    padding: 0px 10px;
    border-radius: 5px;
    z-index: 1000;
    width: 400px;
    /* 设置阴影 */
    box-shadow: 2px 2px 10px #45464D;
    top: -120px;
    /*相对于父元素的位置 */
    left: 0;
}

.tooltip-content {
    font-size: 12px;
    color: white;
    line-height: 1;
}


.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: white;
    padding: 20px;
    min-height: 200px;
    border-radius: 10px;
    max-width: 484px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-around;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.modal-title {
    font-size: 18px;
    font-weight: bold;
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.error-message {
    font-size: 12px;
    color: gray;
}

.name-input-wrapper {
    width: 420px;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 10px 5px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.name-input {
    /*去除输入框的焦点样式  */
    outline: none;
    border: none;
}

.save-button {
    width: 62px;
    height: 36px;
    color: #00B8BF;
    border: 1px solid #00B8BF;
    background-color: white;
    border-radius: 5px;
    margin-left: 10px;
    cursor: pointer;
}

.save-button:hover {
    font-weight: 500;
    background-color: #badede;
}
</style>